import { medicineList } from '@/services/api';
import type { TableProps } from 'antd';
import { Form, Image, Input, Table, Button } from 'antd';
import React, { useEffect, useState } from 'react';
import './DataTable.less';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

interface DataType {
  id: number;
  medicineTypeId: number;
  medicineGrassId: number;
  medicineType: string;
  medicineGrass: string;
  name: string;
  allName: string;
  photo: string;
  initial: string;
  introduce: string;
  component: string;
  popularity: string;
  treament: string;
  actions?: any;
  disease?: string[];
  effect: string[];
  page?: any;
  pageSize?: any;
}

const columns: TableProps<DataType>['columns'] = [
  {
    dataIndex: 'name',
    title: '名称',
    align: 'center',
    width: 80,
  },
  {
    dataIndex: 'photo',
    title: '图片',
    align: 'center',
    width: 150,
    render: (row: any) => row && <Image width={140} src={row} />,
  },
  {
    dataIndex: 'medicineGrass',
    title: '药材类型',
    align: 'center',
    width: 100,
  },
  {
    dataIndex: 'medicineType',
    title: '处方类型',
    align: 'center',
    width: 80,
  },
  {
    dataIndex: 'introduce',
    title: '药材简介',
    align: 'center',
  },
  // {
  //   dataIndex: 'treament',
  //   title: '效果',
  //   align: 'center',
  // },
  {
    dataIndex: 'actions',
    title: '效果',
    align: 'center',
    // render: (row: any) => <div>{ row.actions.map((i: string) => <p>{i}</p>) }</div>
    render: (row: any) => row && <div>{row[0]}</div>,
  },
  {
    dataIndex: 'disease',
    title: '作用',
    align: 'center',
    // render: (row: any) => <div>{ row.disease.map((i: string) => <p>{i}</p>) }</div>
    render: (row: any) => row && <div>{row[0]}</div>,
  },
];

const DataTable: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    getList()
  };
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<DataType[]>([]);
  const [pagination, setPagination] = useState({
    // current: 1,
    // pageSize: 10,
    // total: 10,
    showSizeChanger: false,
  });
  const getList = () => {
    setLoading(true);
    medicineList({ page: 1, pageSize: 1289, ...form.getFieldsValue() }).then((result: any) => {
      setData([...result.data.records]);
      // setPagination({ ...pagination, current: result.data.current, total: result.data.total });
      setLoading(false);
    });
  };
  useEffect(() => {
    getList();
  }, []);

  return (
    <div className="dataTable">
      <div className="dataTable-chart">
        {/* <Chart1></Chart1>7 */}
        <Form {...layout} layout={'inline'} form={form} name="control-hooks" onFinish={onFinish} style={{ maxWidth: '100%' }}>
          <Form.Item name="name" label="药材名称" style={{ width: '300px' }}>
            <Input placeholder='请输入药材名称'  />
          </Form.Item>
          <Form.Item name="medicineGrass" label="药材类型" style={{ width: '300px' }}>
            <Input placeholder='请输入药材类型' />
          </Form.Item>
          <Form.Item name="medicineType" label="处方类型" style={{ width: '300px' }}>
            <Input placeholder='请输入处方类型' />
          </Form.Item>
          <Form.Item name="introduce" label="药材简介" style={{ width: '300px' }}>
            <Input placeholder='请输入药材简介' />
          </Form.Item>
          <Button  htmlType="submit">
            查询
          </Button>
        </Form>
      </div>

      <Table size="small" bordered loading={loading} columns={columns} dataSource={data} pagination={pagination} />
    </div>
  );
};

export default DataTable;
